<template>
  <div class="mine" id="exit">
    <div class="mine-details">
      <div class="mine-photo">
        <!-- <img :src="defaultImg" /> -->
        <img :src="headImg" />
      </div>
      <div class="mine-intro">
        <p class="mine-name">{{userName}}</p>
        <p class="mine-phone">{{phone}}</p>
      </div>
      <div class="mine-more">
        <svg-icon icon-class="箭头" widthW="1.5em" heightH="1.5em" class="icon-style"
          @click.native="$router.push({ path: '/person/personaldetail' })"></svg-icon>
      </div>
    </div>
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item title="我的物业" name="1">
        <van-grid :gutter="10" :border="false" :column-num="4">
          <van-grid-item v-for="item in propertyServiceList" :key="item.text" @click="integralClick(item)">
            <svg-icon :icon-class="item.icon" widthW="1rem" heightH="1rem"></svg-icon>
            <span class="function_text">{{ item.text }}</span>
          </van-grid-item>
          <van-grid-item>
            <a :href="`tel:${serviceContact}`" style="color:#666666">
              <div>
                <svg-icon icon-class="联系物业" widthW="1rem" heightH="1rem"></svg-icon>
              </div>
              <span class="function_text">联系物业</span>
            </a>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
      <van-collapse-item title="我的积分" name="2">
        <van-grid :gutter="10" :border="false" :column-num="4">
          <van-grid-item v-for="item in integralServiceList" :key="item.text" @click="integralClick(item)">
            <svg-icon :icon-class="item.icon" widthW="1rem" heightH="1rem"></svg-icon>
            <span class="function_text">{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
      <van-collapse-item title="我的就业" name="3">
        <van-grid :gutter="10" :border="false" :column-num="4">
          <van-grid-item v-for="item in jobServiceList" :key="item.text" @click="integralClick(item)">
            <svg-icon :icon-class="item.icon" widthW="1rem" heightH="1rem"></svg-icon>
            <span class="function_text">{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
      <van-collapse-item title="我的医疗" name="4">
        <van-grid :gutter="10" :border="false" :column-num="4">
          <van-grid-item v-for="item in medicServiceList" :key="item.text" @click="integralClick(item)">
            <svg-icon :icon-class="item.icon" widthW="1rem" heightH="1rem"></svg-icon>
            <span class="function_text">{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
      <van-collapse-item title="我的政务" name="5">
        <van-grid :gutter="10" :border="false" :column-num="4">
          <van-grid-item v-for="item in governmentServiceList" :key="item.text" @click="integralClick(item)">
            <svg-icon :icon-class="item.icon" widthW="1rem" heightH="1rem"></svg-icon>
            <span class="function_text">{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
      <van-collapse-item title="特色服务" name="6">
        <van-grid :gutter="10" :border="false" :column-num="4">
          <van-grid-item v-for="item in specialList" :key="item.text" @click="integralClick(item)">
            <svg-icon :icon-class="item.icon" widthW="1rem" heightH="1rem"></svg-icon>
            <span class="function_text">{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
    </van-collapse>
    <ul class="mine-function">
      <li v-for="(item, index) in functionList" :key="index" @click="toPage(item.urlName)">
        <span class="function-icon">
          <svg-icon :icon-class="item.icon" widthW="1em" heightH="1em"></svg-icon>
        </span>
        <span class="funtion-title">{{ item.name }}</span>
        <span class="function-icon-arrow">
          <van-icon name="arrow" style="margin-top:5.5px" />
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
  import mine from "../../controller/mine";
  export default {
    name: "Mine",
    components: {},
    data() {
      return {
        serviceContact: '',
        defaultImg: require("../../icons/img/my.png"),
        headImg: require("../../icons/img/my.png"),
        userName: "",
        phone: "",
        activeName: "1",
        propertyServiceList: [{
            icon: "我的报修",
            path: "/work/myRepair",
            text: "我的报修"
          },
          {
            icon: "缴费记录",
            path: "/work/payHistory",
            text: "缴费记录"
          },
          {
            icon: "访客记录",
            path: "/work/visitorRecord",
            text: "访客记录"
          }
        ],
        integralServiceList: [{
            icon: "积分申报",
            path: "/integral/integralDeclare",
            text: "积分申报"
          },
          {
            icon: "积分明细",
            path: "/integral/declareRecord",
            text: "积分明细"
          }
        ],
        governmentServiceList: [{
            icon: "我的办件",
            path: "/work/workSchedule",
            text: "我的办件"
          },
          {
            icon: "我的快递",
            path: "/work/myExpress",
            text: "我的快递"
          }
        ],
        medicServiceList: [{
            icon: "我的咨询",
            path: "/work/communityHealth/myConsultation",
            text: "我的咨询"
          },
          {
            icon: "就诊档案",
            path: "/work/communityHealth/visitFile",
            text: "就诊档案"
          }
        ],
        jobServiceList: [{
            icon: "我的简历",
            path: "/work/myResume/myResume",
            text: "我的简历"
          },
          {
            icon: "我的快递",
            path: "/work/myResume/myDelivery",
            text: "我的投递"
          }
        ],
        specialServiceList: [{
          icon: "我的申请",
          path: "/work/myResume/myResume",
          text: "我的简历"
        }],
        specialList: [{
          icon: "特色服务申请",
          path: "/work/specialService/myServiceApplication",
          text: "申请记录"
        }],
        functionList: [
          //    {
          //         name: '意见反馈',
          //         icon: '个人中心-意见反馈',
          //         urlName: 'feedBack'
          //     },
          {
            name: "系统设置",
            icon: "个人中心-系统设置",
            urlName: "systemSettings"
          }
        ]
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getUSerInfo();
      this.serviceContact = JSON.parse(localStorage.getItem('userInfo')).serviceContact
    },
    methods: {
      getUSerInfo() {
        mine.user_v1_findOwn().then(res => {
          if (res.code === "0") {
            this.headImg = res.datas.headImg;
            this.userName = res.datas.username;
            this.phone = res.datas.phone;
          }
        });
      },
      toPage(urlName) {
        if (urlName == "") {
          return;
        }
        this.$router.push({
          name: urlName
        });
      },
      integralClick(item) {
        if (item.path == "") {
          return;
        }
        this.$router.push({
          path: item.path
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .mine {
    .mine-details {
      padding: 15px;
      height: 120px;
      line-height: 80px;

      .mine-photo {
        float: left;
        height: 130px;
        line-height: 200px;

        img {
          width: 79.45px;
          height: 79.45px;
          border-radius: 50%;
        }
      }

      .mine-intro {
        float: left;
        padding-left: 25px;
        line-height: 60px;

        .mine-name {
          height: 25px;
          font-size: 18px;
          padding-top: 20px;

          .mine-post {
            display: inline-block;
            width: 110px;
            height: 25px;
            border-radius: 15px;
            background-color: #3399fe;
            font-size: 15px;
            text-align: center;
            margin-left: 20px;
          }
        }

        .mine-phone {
          height: 25px;
          line-height: 40px;
          font-size: 14px;
          padding-top: 30px;

          .mine-phone-number {
            font-size: 12px;
            color: #98989a;
          }
        }
      }

      .mine-more {
        float: right;
        line-height: 130px;
      }
    }

    .mine-function {
      padding: 20px 15px 15px 15px;

      li {
        height: 40px;
        font-size: 16px;
        align-items: center;

        .function-icon {
          margin-right: 22px;
        }

        .funtion-title {
          margin-right: 20px;
        }

        .function-icon-arrow {
          float: right;
        }

        .funtion-tip {
          font-size: 12px;
          display: inline-block;
          width: 74px;
          height: 30px;
          border-radius: 15px;
          background-color: red;
          color: #ffffff;
          text-align: center;
        }
      }
    }

    .workstation_sub_title {
      margin: 10px 30px 30px 15px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      >.van-icon {
        font-size: 18px;
        float: right;
      }
    }

    /deep/.van-grid-item__content--center {
      padding-top: 0;
    }

    .devide_info {
      width: 345px;
      margin: 0 15px 10px 15px;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      height: auto;
    }

    .pay_btn {
      width: 345px;
      margin: 66.5px 15px;
      border-radius: 22px;
      background: #1ecda5;
      color: #ffffff;
      text-align: center;
      font-size: 16px;
    }

    .work_station {
      margin-top: 1.22667rem;

      .function_text {
        margin-top: 8px;
        color: #666666;
      }
    }
  }
</style>